<!--
 * @Author: Lee
 * @Date: 2022-01-25 10:15:37
 * @LastEditors: Lee
 * @LastEditTime: 2022-01-25 11:41:33
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul,
      li {
        list-style: none;
        padding: 0;
      }

      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #808080;
      }
      .top-bar {
        height: 300px;
        background-color: #eeeeee;
        margin-bottom: 10px;
      }
      .menus {
        width: 100%;

        height: 49px;
        background: #eeeeee;
      }
      li {
        height: 60px;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        color: #808080;
      }
      .sticky {
        position: fixed;
        top: 0;
        left: 0;
        background: cornflowerblue;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box top-bar">TOP-BAR</div>
    <div class="box menus">MERNUs</div>
    <ul>
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
      <li>07</li>
      <li>08</li>
      <li>09</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
    </ul>
    <script>
      var menus = document.querySelector('.menus');
      var loc = menus.offsetTop + menus.offsetHeight;
      window.onscroll = function () {
        var sTop =
          document.body.scrollTop || document.documentElement.scrollTop;
        if (sTop > loc) {
          menus.classList.add('sticky');
        } else {
          menus.classList.remove('sticky');
        }
      };
    </script>
  </body>
</html>
